import React, { Component, useRef } from 'react'
import GoBack from '@/components/TheGoBack'
import _ from 'lodash'
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { apiGetMemberCouponList, apiGetExchangeInfoList, apiGetMemberCouponPage,apiGetCouponInfoView } from '@/request/coupons'
import { Select } from "antd";
import { exportTable } from '@/utils/exportTable.js'

const { Option } = Select;
export default class CDKList extends Component {
    constructor(props){
        super(props)
        this.state = {
            columns_coupon: [
                {
                    title: "优惠券名称",
                    dataIndex: "couponTitle",
                    key: "couponTitle",
                    render: (text, record) => {
                        return <div className="p-white-space" >{record.couponTitle}</div>
                    }
                },
                // {
                //     title: "适用范围",
                //     dataIndex: "couponTitle",
                //     key: "couponTitle",
                //     render: (text, record) => {
                //         return <div className="p-white-space" >{record.couponTitle}</div>
                //     }
                // },
                {
                    title: "优惠券类型",
                    dataIndex: "couponType",
                    key: "couponType",//H兑换券 J满减券 Z满折券 D打车券
                    render: (text, record) => {
                        let label = ''
                        switch (text) {
                            case 'J':
                                label = '代金券';
                                break;
                            case 'Z':
                                label = '折扣券';
                                break;
                            case 'D':
                                label = '打车券';
                                break;
                        }
                        return label;
                    },
                },
                {
                    title: "面值",
                    dataIndex: "couponPrice",
                    key: "couponPrice",
                    render: (text, record) => {
                        if (record.couponType === 'J' || record.couponType === 'D') {
                            return <React.$Price price={record.couponPrice} />
                        }
                        if (record.couponType === 'Z') {
                            return `${React.$transNum(record.couponPrice, 1, -1)}折`
                        }
                    }
                },
                {
                    title: "有效期",
                    dataIndex: "effectiveTime",
                    key: "effectiveTime",
                    render: (text, record) => {
                        if (record.timeType === 1) {
                            return <div>{record.effectiveTime}天</div>
                        }
                        // return <div>{`${record.validityBeginDate} ${record.useBeginTime}`} 至 {`${record.validityEndDate} ${record.useEndTime}`}</div>
                        return <div>{`${record.startTime}`} 至 {`${record.endTime}`}</div>
                    }
                },
                {
                    title: '优惠券状态',

                    dataIndex: "couponStatus",
                    key: "couponStatus",
                    render: (text, record) => {
                        let txt = record.couponStatus === 'Y' ? '启用' : record.couponStatus === 'N' ? '关闭' : '过期'
                        return <div>{txt}</div>
                    }
                }
            ],
            data_coupon: [],
            columns_CDK: [
                {
                    title: "用户ID",
                    dataIndex: "memberId",
                    key: "memberId",
                    render: (text, record) => {
                        return <div className="p-white-space" >{record.memberId}</div>
                    }
                },
                {
                    title: "用户昵称",
                    dataIndex: "memberName",
                    key: "memberName",
                    render: (text, record) => {
                        return <div className="p-white-space" >{record.memberName}</div>
                    }
                },
                {
                    title: "手机号",
                    dataIndex: "memberMobile",
                    key: "memberMobile",
                    render: (text, record) => {
                        return <div className="p-white-space" >{record.memberMobile}</div>
                    }
                },
                {
                    title: '领取时间',
                    dataIndex: 'createTime',
                    key:'createTime',
                    render :(text, record)=>{
                        return <div className='p-white-space'>{record.createTime}</div>
                    }
                },
                {
                    title: '使用时间/过期时间',
                    dataIndex: "timeType",
                    key: "timeType",
                    render: (text, record) => {
                        if(record.couponStatus === 'Y'){
                            return <div className="p-white-space" >{record.endTime}</div>
                        }else
                        if(record.couponStatus === 'N'){
                            return <div className="p-white-space" >{record.verificationTime}</div>
                        }else
                        if(record.couponStatus === 'G'){
                            return <div className="p-white-space" >{record.endTime}</div>
                        }

                    }
                },
                // {
                //     title: '使用状态',
                //     dataIndex: "couponStatus",
                //     key: "couponStatus",
                //     render: (text, record) => {
                //         console.log(record.couponStatus)
                //         if(record.couponStatus === 'Y'){
                //             return <div className="p-white-space" >未使用</div>
                //         }
                //         if(record.couponStatus === 'N'){
                //             return <div className="p-white-space" >已使用</div>
                //         }
                //         if(record.couponStatus === 'G'){
                //             return <div className="p-white-space" >已过期</div>
                //         }
                //     }
                // }
            ],
            data_CDK: [],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            loading: false,
            exchangeValue: '',
            couponStatus:""
        }
    }

    componentDidMount() {
        let id = this.props.match.params.id
        let couponStatus = this.state.couponStatus
        this.setState({ exchangeValue: id, loading: true }, async () => {
            await this.getView(id)
            await this.initData(this.state.pageData,id,couponStatus)
            this.setState({
                loading: false
            })
        })

    }
    async getView(couponId) {
        let res = await apiGetCouponInfoView({ couponId })
        if (res.code === 0) {
            let data_coupon = [
                {
                    couponTitle: res.data.couponTitle,
                    couponType: res.data.couponType,
                    couponPrice: res.data.couponPrice,
                    effectiveTime: res.data.effectiveTime,
                    timeType:res.data.timeType,
                    startTime:res.data.startTime,
                    endTime:res.data.endTime,
                    verificationTime:res.data.verificationTime,
                    couponStatus:res.data.couponStatus,
                }
            ]
            this.setState({
                data_coupon
            })
        }
    }
    async initData({ pageNo, pageSize },couponId,couponStatus) {
        let res = await apiGetMemberCouponPage({ pageNo, pageSize ,couponId,couponStatus})
        if (res.code === 0) {
            let data_CDK = res.data.map(item => {
                return {
                    memberId: item.memberId ? item.memberId : '/',
                    memberName: item.memberName ? item.memberName : '/',
                    memberMobile: item.memberMobile ? item.memberMobile : '/',
                    createTime: item.createTime ? item.createTime : '/',
                    verificationTime:item.verificationTime ? item.verificationTime:'/',
                    endTime: item.endTime ? item.endTime : '/',
                    couponStatus:item.couponStatus ? item.couponStatus : '/'
                }
            })
            this.setState({
                data_CDK: data_CDK,
                total: res.totalCount,
                pageData: {
                    pageNo: pageNo,
                    pageSize: pageSize,
                }
            })

        }
    }
    handleChange = (e) => {
        let id = this.props.match.params.id
        this.setState({
            couponStatus:e,
        },()=>{
            this.initData({pageNo:1,pageSize:10},id,this.state.couponStatus)
        })
    }
    pageChange = (pageNo, pageSize) => {
        let couponId = this.props.match.params.id
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.initData({ pageNo, pageSize },couponId,this.state.couponStatus)
        })
    };
    async exportExcel() {
        const res = await apiGetMemberCouponList({couponId:this.props.match.params.id,couponStatus:this.state.couponStatus})
        if (res.code === 0) {
            let tH = [
                { prop: 'memberId', title: '用户ID' },
                { prop: 'memberName', title: '用户昵称' },
                { prop: 'memberMobile', title: '手机号' },
                { prop: 'createTime', title: '领取时间' },
                { prop: 'verificationTime', title: '使用时间' },
                { prop: 'endTime', title: '过期时间' },
                { prop: 'couponStatus', title: '使用状态' },
            ]
            let tB = res.data.map(item => {
                return {
                    memberId: item.memberId ? item.memberId : '/',
                    memberName: item.memberName ? item.memberName : '/',
                    memberMobile: item.memberMobile ? item.memberMobile : '/',
                    createTime: item.createTime ? item.createTime : '/',
                    verificationTime:item.verificationTime ? item.verificationTime:'/',
                    endTime: item.endTime ? item.endTime : '/',
                    couponStatus:item.couponStatus ? item.couponStatus==="Y"?"未使用":item.couponStatus==="N"?"已使用":item.couponStatus==="G"?"已过期":"/" : '/'
                }
            })
            exportTable(tH, tB,'CDK列表')
        } else {
            React.$message({
                type: 'warning',
                content: '导出失败'
            })
            return false
        }

    }
    render() {
        const { columns_coupon, columns_CDK, data_CDK, data_coupon, pageData: { pageNo, pageSize }, total, loading,couponStatus } = this.state
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title="用户列表" />
                {/*<div >*/}
                {/*    <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>优惠券信息</div>*/}
                {/*    <TheTable columns={columns_coupon} dataSource={data_coupon} loading={loading} />*/}
                {/*</div>*/}
                <div >
                    <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>用户列表({total})
                        {
                            total ? <div>
                                    <TheButton onClick={() => this.exportExcel()}>Excel导出</TheButton>
                                    {/*&nbsp;&nbsp;*/}
                                    {/*<Select*/}
                                    {/*    defaultValue={couponStatus}*/}
                                    {/*    style={{*/}
                                    {/*        width: 120,*/}
                                    {/*    }}*/}
                                    {/*    onChange={(e)=>this.handleChange(e)}*/}
                                    {/*>*/}
                                    {/*    <Option value="" >*/}
                                    {/*        全部*/}
                                    {/*    </Option>*/}
                                    {/*    <Option value="Y" >*/}
                                    {/*        未使用*/}
                                    {/*    </Option>*/}
                                    {/*    <Option value="N" >*/}
                                    {/*        已使用*/}
                                    {/*    </Option>*/}
                                    {/*    <Option value="G" >*/}
                                    {/*        已过期*/}
                                    {/*    </Option>*/}
                                    {/*</Select>*/}
                                </div>
                                : null
                            // <div>
                            //     <Select
                            //         defaultValue={couponStatus}
                            //         style={{
                            //             width: 120,
                            //         }}
                            //         onChange={(e)=>this.handleChange(e)}
                            //     >
                            //         <Option value="" >
                            //             全部
                            //         </Option>
                            //         <Option value="Y" >
                            //             未使用
                            //         </Option>
                            //         <Option value="N" >
                            //             已使用
                            //         </Option>
                            //         <Option value="G" >
                            //             已过期
                            //         </Option>
                            //     </Select>
                            // </div>
                        }
                    </div>
                    <div >
                        <TheTable scroll={{ x: "max-content", y: '45vh' }} columns={columns_CDK} dataSource={data_CDK} loading={loading} />
                        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
                    </div>
                </div>
            </div>
        )
    }
}
